import React, {Component} from 'react';
import {connect} from 'dva';
import { FormattedMessage, formatMessage } from 'umi/locale'; //此方法引入的数据可以在src/locales中配置
import style from './DetailsStyle.less'

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Upload,
  Tree,
  Tabs,
  Collapse, Empty,
} from 'antd';
import {Select,Button , Table ,Modal} from '@/components/CustomAntd'
const { TreeNode } = Tree;
const { TabPane } = Tabs;


export default class DetailModal extends Component {
  componentDidMount() {

  }
  renderTreeNodes = data => data.map((item) => {
    if (item.permissions) {
      return (
        <TreeNode title={item.permission_name} key={item.permission_id} dataRef={item}>
          {this.renderTreeNodes(item.permissions)}
        </TreeNode>
      );
    }else{
      return (
        <TreeNode title={item.permission_name} key={item.permission_id} dataRef={item}>
        </TreeNode>
      );
    }
  })
  render() {
    const {closeDatails,detailVisible,row,detail_permission} = this.props;
    const getContentProps = ()=>{
      const content = [

      ];
      if(detail_permission && typeof(detail_permission) === 'object' ){
        for(let type in detail_permission){
          const tabName = type=== "type_route"? "页面型功能":"非页面型功能";
          content.push(
            <TabPane tab={tabName} key={type+'tabPane'}>
              <Tree defaultExpandAll={true} className={style['input-box']} treeCheckable="true" showLine={true}  >
                {this.renderTreeNodes(detail_permission[type])}
              </Tree>
            </TabPane>
          )
        }
      }

      return content
    }
    return (
      <Modal
        visible={detailVisible}
        title="角色详情"
        onCancel={closeDatails}
        destroyOnClose={true}
        maskClosable={false}
        width="800px"
        footer={[
          <Button
            key="submit"
            type="primary"
            onClick={closeDatails}
          >
            确定
          </Button>,
        ]}
      >
        {/* 行1 */}
        <div className={style['one-line']}>
          <div className={style['one-block']}>
            <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.role_name' })}：</p>
            <p className={style.p2}>{row?row.role_name:null}</p>
          </div>
          <div className={style['one-block']}>
            <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.create_user_id' })}：</p>
            <p className={style.p2}>{row?row.create_user_name:null}</p>
          </div>
        </div>
        <div className={style['one-line']}>
          <div className={style['one-block']}>
            <p className={style.p1}>{formatMessage({ id: 'iot.organization.organization_search.tenant_name' })}：</p>
            <p className={style.p2}>{row && row.tenant_name ?row.tenant_name:null}</p>
          </div>
        </div>
        {/* 行2 */}
        <div className={style['one-line']}>
          <div className={style['one-block']}>
            <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.create_time' })}：</p>
            <p className={style.p2}>{row?row.create_time:null}</p>
          </div>
        </div>
        {/* 行3 */}
        <div className={style['one-line']}>
          <div className={style['one-block']}>
            <p className={style.p1}>{formatMessage({ id: 'iot.roleManage.details_model.description' })}：</p>
            <p className={style.p2}>{row?row.description:null}</p>
          </div>
        </div>

        <Tabs >
          {getContentProps ()}
        </Tabs>
      </Modal>
    );
  }
}
